<template>
  <div class="station-pricing-container">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-select
              v-model="selectedType"
              placeholder="请选择废品类型"
              clearable
              style="width: 100%"
          >
            <el-option
                v-for="item in materialTypes"
                :key="item.materialTypeId"
                :label="item.typeName"
                :value="item.materialTypeId"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input-number
              v-model="price"
              :min="0"
              :precision="2"
              :step="0.1"
              placeholder="请输入价格"
              style="width: 200px"
          ></el-input-number>
          <span class="unit">元/kg</span>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handlePrice">定价</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 参考价格表格 -->
    <div class="reference-price" v-if="referencePrices.length > 0">
      <h3>参考价格</h3>
      <el-table
          :data="referencePrices"
          border
          style="width: 100%; margin-bottom: 20px;"
      >
        <el-table-column prop="typeName" label="废品类型" width="180"></el-table-column>
        <el-table-column prop="price" label="参考价" width="150">
          <template slot-scope="scope">
            <span class="reference-price-value">{{ scope.row.price }} 元/kg</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 价格列表 -->
    <div class="price-table">
      <h3>当前站点价格</h3>
      <el-table
          :data="priceList"
          border
          v-loading="loading"
          style="width: 100%"
      >
        <el-table-column prop="typeName" label="废品类型" width="180"></el-table-column>
        <el-table-column prop="price" label="价格" width="150">
          <template slot-scope="scope">
            <span class="price-highlight">{{ scope.row.price }} 元/kg</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)"
            >修改价格</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 修改价格弹窗 -->
    <el-dialog
        title="修改价格"
        :visible.sync="dialogVisible"
        width="400px"
    >
      <el-form :model="editForm" ref="editForm" label-width="100px">
        <el-form-item label="废品类型">
          <span>{{ currentType.typeName }}</span>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number
              v-model="editForm.price"
              :min="0"
              :precision="2"
              :step="0.1"
              style="width: 200px"
          ></el-input-number>
          <span class="unit">元/kg</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'StationPricing',
  data() {
    return {
      loading: false,
      materialTypes: [], // 废品类型列表
      selectedType: null, // 选中的废品类型
      price: 0, // 定价价格
      priceList: [], // 价格列表
      dialogVisible: false, // 修改价格弹窗
      currentType: {}, // 当前选中的类型
      siteId:'', // 站点ID
      editForm: {
        price: 0
      },
      referencePrices: [] // 参考价格列表
    }
  },
  methods: {
    // 获取站点ID
    async getSiteId() {
      try {
        const resp = await this.$http.get('/platform/recycleBin/selectStationIdByAccountId')
        if (resp.data.code === 200) {
              this.siteId = resp.data.data;
              console.log(this.siteId);
              this.getPriceList()
        }
        } catch (error) {
          this.$message.error('获取站点ID失败')
      }
      },
    // 获取废品类型列表
    async getMaterialTypes() {
      try {
        const resp = await this.$http.post('/recycle/materialType/selectType', {
          status: 0,
          // typeName: ''
        })
        if (resp.data.code === 200) {
          this.materialTypes = resp.data.data.records || []
          console.log(this.materialTypes);
          // 过滤掉 typeSelf 为 1 的类型
          console.log(this.materialTypes[0].typeSelf===1);
          this.materialTypes = this.materialTypes.filter(item => item.typeSelf != 1);
          console.log(this.materialTypes);
          // 获取参考价格
          this.getReferencePrices()
        }
      } catch (error) {
        this.$message.error('获取废品类型失败')
      }
    },

    // 获取站点价格列表
    async getPriceList() {
      this.loading = true
      var formData = new FormData();
      formData.append("siteId", this.siteId); 
      try {
        const resp = await this.$http.post('/recycle/wastePricing/selectStationPriceBySiteId', formData)
        if (resp.data.code === 200) {
          this.priceList = resp.data.data || []
        }
      } catch (error) {
        this.$message.error('获取价格列表失败')
      } finally {
        this.loading = false
      }
    },

    // 处理定价
    async handlePrice() {
      if (!this.selectedType) {
        return this.$message.warning('请选择废品类型')
      }
      if (this.price <= 0) {
        return this.$message.warning('请输入正确的价格')
      }

      try {
        const params = {
          materialTypeId: this.selectedType,
          price: this.price,
          siteId: this.siteId // 这里使用固定值，实际应从用户信息中获取
        }
        console.log(this.selectedType);
        const resp = await this.$http.post('/recycle/wastePricing/stationPrice', params)
        if (resp.data.code === 200) {
          this.$message.success('定价成功')
          this.selectedType = null
          this.price = 0
          this.getPriceList()
        } else {
          this.$message.error(resp.data.message || '定价失败')
        }
      } catch (error) {
        this.$message.error('定价失败')
      }
    },

    // 显示修改价格弹窗
    handleEdit(row) {
      this.currentType = row
      this.editForm.price = row.price
      this.dialogVisible = true
    },

    // 提交修改
    async submitEdit() {
      try {
        const params = {
          materialTypeId: this.currentType.materialTypeId,
          price: this.editForm.price,
          siteId: this.siteId // 这里使用固定值，实际应从用户信息中获取
        }
        const resp = await this.$http.post('/recycle/wastePricing/stationPrice', params)
        if (resp.data.code === 200) {
          this.$message.success('修改成功')
          this.dialogVisible = false
          this.getPriceList()
        } else {
          this.$message.error(resp.data.message || '修改失败')
        }
      } catch (error) {
        this.$message.error('修改失败')
      }
    },

    // 获取参考价格
    async getReferencePrices() {
      try {
        const resp = await this.$http.get('/recycle/wastePricing/userSelectPrice')
        if (resp.data.code === 200) {
          this.referencePrices = resp.data.data || []
        }
      } catch (error) {
        this.$message.error('获取参考价格失败')
      }
    }
  },
  created() {
    this.getSiteId()
    this.getMaterialTypes()
  }
}
</script>

<style lang="less" scoped>
.station-pricing-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;

  .search-area {
    margin-bottom: 20px;

    .unit {
      margin-left: 10px;
      color: #606266;
    }
  }

  .reference-price {
    margin-bottom: 20px;
    
    h3 {
      margin-bottom: 10px;
      color: #303133;
    }
    
    .reference-price-value {
      color: #409EFF;
      font-weight: bold;
    }
  }

  .price-table {
    h3 {
      margin-bottom: 10px;
      color: #303133;
    }
    
    .price-highlight {
      color: #f56c6c;
      font-weight: bold;
      font-size: 16px;
    }
  }

  .dialog-footer {
    text-align: right;
  }
}
</style>